<template>
  <el-form :model="form" ref="formRef" class="p-20">
    <el-descriptions :column="2" border :colon="true" class="chadche">
      <el-descriptions-item class-name="hidden" label-class-name="hidden" />
      <el-descriptions-item class-name="hidden" label-class-name="hidden" />

      <el-descriptions-item :span="2">
        <template #label>
          <span class="require">地区</span>
        </template>
        <area-cascader
          :strictly="true"
          prop="dizhi"
          width="100%"
          v-model="form.dizhi"
          :disabledLevel="0"
          :maxLevel="2"
        />
      </el-descriptions-item>
      <el-descriptions-item :span="1">
        <template #label>
          <span class="require">是否财政直管</span>
        </template>
        <el-form-item prop="isVasaRecta" :rules="$formRules.select">
          <pub-dict-select
            style="width: 100%"
            v-model="form.isVasaRecta"
            dict-code="SF"
          />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item :span="1">
        <template #label>
          <span class="require">是否重点老区苏区</span>
        </template>
        <el-form-item prop="keyAreaCode" :rules="$formRules.select">
          <pub-dict-select
            style="width: 100%"
            v-model="form.keyAreaCode"
            dict-code="ZDLQSQ"
          />
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
  <div class="bottom-btn">
    <el-button type="default" size="small" @click="emit('cancel')">
      取消
    </el-button>
    <el-button type="primary" size="small" @click="submitForm(1)">
      提交
    </el-button>
  </div>
</template>
<script setup>
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import { Delete, Edit, Minus, Plus } from '@element-plus/icons-vue'

import { renderAreaArr, renderAreaCode } from '@/utils'
import { edit, get_detail } from '@/api/ZJGL/lqsqwh'
import uuid from 'uuid'
const emit = defineEmits(['cancel'])
const props = defineProps({
  editId: {
    type: String
  }
})

const formRef = ref(null)
const orgInfo = useUserStore().orgInfo
const form = ref({
  dizhi: []
})
const initForm = async id => {
  let res = await get_detail(id)
  form.value = res.data
  form.value.dizhi = renderAreaArr('1', res.data)
}
const submitForm = status => {
  formRef.value.validate(async valid => {
    if (valid) {
      edit(form.value).then(res => {
        if (res.succeed) {
          ElMessage.success(res.msg)
          emit('success')
          emit('cancel')
        }
      })
    }
  })
}
onMounted(() => {
  initForm(props.editId)
})
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  margin-top: 10px;
  &:first-child {
    margin-top: 0;
  }
  .plus-btn {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chadche {
    flex: 1;
  }
}
</style>
